$view-mask-color: rgba(52, 73, 94, 0.3);
$tools-width: 500;
$tools-background-color: rgba(34, 166, 179, 0.6);

.app-container {
  :deep(.el-card) {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .resume-upload-file .resume-uploader {
    :deep(.el-upload__tip) {
      display: inline;
      margin-left: 20px;
    }
  }

  .resume-upload-preview {
    height: 300px;
    :deep(.resume-file-wrapper) {
      display: flex;
      height: inherit;
    }
    .resume-file {
      flex: 0 0 200px;
      position: relative;
      height: 100%;
      background-color: rgba(212, 221, 225, 0.5);
      background: {
        image: url("@/assets/imgs/resume-none.png");
        size: 25%;
        position: center;
        repeat: no-repeat;
      }
      border: 2px dashed #686a67;

      &:hover {
        background-color: rgba(104, 106, 103, 0.6);
      }

      &__mark {
        position: absolute;
        visibility: hidden;
        top: 50%;
        left: 50%;
        translate: -50% -50%;
        text-align: center;
        color: #12507b;
      }

      &__opts {
        display: flex;
        visibility: hidden;
        height: inherit;
        padding-bottom: 20px;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: flex-end;
      }

      &.is {
        background: {
          size: 100%;
          color: none;
          image: url("@/assets/imgs/resume-is.png");
        }
        &:hover {
          .resume-file__opts {
            visibility: visible;
          }
        }
      }

      &:not(.is) {
        &:hover {
          .resume-file__mark {
            visibility: visible;
          }
        }
      }
    }
  }
}
